<template>
  <div class="news-page">
    <div class="container">
      <h1 class="page-title">最新动态</h1>
      
      <!-- 动态列表 -->
      <div class="news-list">
        <el-card 
          v-for="news in newsList" 
          :key="news.id" 
          class="news-card" 
          shadow="hover"
        >
          <div class="news-content">
            <div class="news-image">
              <img :src="news.image" :alt="news.title">
              <div class="news-tag" v-if="news.isNew">最新</div>
            </div>
            <div class="news-info">
              <h2 class="news-title">{{ news.title }}</h2>
              <p class="news-desc">{{ news.description }}</p>
              <div class="news-meta">
                <div class="meta-left">
                  <span class="news-date">
                    <el-icon><Calendar /></el-icon>
                    {{ news.date }}
                  </span>
                  <span class="news-views">
                    <el-icon><View /></el-icon>
                    {{ news.views }}次浏览
                  </span>
                </div>
                <div class="news-tags">
                  <el-tag 
                    v-for="tag in news.tags" 
                    :key="tag" 
                    size="small" 
                    class="tag"
                    :type="getTagType(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Calendar, View } from '@element-plus/icons-vue'

// 获取标签类型
function getTagType(tag) {
  const typeMap = {
    'Vue3': 'success',
    '前端开发': 'primary',
    '技术更新': 'info',
    '人工智能': 'warning',
    '教育创新': 'success',
    '研讨会': 'info',
    '编程语言': 'primary',
    '技术趋势': 'warning',
    '开发者调查': 'info',
    '平台更新': 'success',
    '用户体验': 'primary',
    '功能升级': 'info',
    'Web3.0': 'warning',
    '区块链': 'primary',
    '薪资报告': 'success',
    'IT行业': 'primary',
    '就业趋势': 'info',
    '微服务': 'warning',
    '架构设计': 'primary',
    '技术分享': 'info',
    '移动开发': 'success',
    '跨平台': 'primary',
    '数据安全': 'warning',
    '隐私保护': 'primary',
    '技术研讨': 'info',
    '学习路线': 'success',
    '技术指南': 'primary',
    '职业发展': 'info'
  }
  return typeMap[tag] || 'info'
}

// 动态列表数据
const newsList = ref([
  {
    id: 1,
    title: 'Vue3 3.0正式发布，带来革命性更新',
    description: 'Vue3 3.0版本正式发布，带来了Composition API、Teleport、Fragments等多项重大更新，性能提升显著，开发体验更佳。',
    image: 'https://picsum.photos/800/400?random=1',
    date: '2024-03-15',
    views: 1234,
    tags: ['Vue3', '前端开发', '技术更新'],
    isNew: true
  },
  {
    id: 2,
    title: '人工智能在教育领域的应用研讨会',
    description: '我们邀请了多位AI专家和教育工作者，共同探讨人工智能如何改变教育模式，提升学习效率。',
    image: 'https://picsum.photos/800/400?random=2',
    date: '2024-03-14',
    views: 986,
    tags: ['人工智能', '教育创新', '研讨会'],
    isNew: true
  },
  {
    id: 3,
    title: '2024年最受欢迎的编程语言排行榜',
    description: '根据最新的开发者调查，Python继续保持领先地位，Rust和Go语言的使用率显著提升。',
    image: 'https://picsum.photos/800/400?random=3',
    date: '2024-03-13',
    views: 1567,
    tags: ['编程语言', '技术趋势', '开发者调查']
  },
  {
    id: 4,
    title: '在线教育平台全新改版上线',
    description: '我们的平台进行了全面的改版升级，新增了更多互动功能，优化了学习体验，让学习更加高效有趣。',
    image: 'https://picsum.photos/800/400?random=4',
    date: '2024-03-12',
    views: 2345,
    tags: ['平台更新', '用户体验', '功能升级']
  },
  {
    id: 5,
    title: 'Web3.0技术发展趋势分析',
    description: '深入探讨Web3.0技术的发展现状和未来趋势，包括区块链、去中心化应用等热门话题。',
    image: 'https://picsum.photos/800/400?random=5',
    date: '2024-03-11',
    views: 1876,
    tags: ['Web3.0', '区块链', '技术趋势']
  },
  {
    id: 6,
    title: '2024年IT行业薪资报告发布',
    description: '最新IT行业薪资调查报告显示，AI、云计算、大数据等领域的薪资水平持续走高。',
    image: 'https://picsum.photos/800/400?random=6',
    date: '2024-03-10',
    views: 3456,
    tags: ['薪资报告', 'IT行业', '就业趋势']
  },
  {
    id: 7,
    title: '微服务架构最佳实践分享',
    description: '资深架构师分享微服务架构的设计原则、实践经验和技术选型建议。',
    image: 'https://picsum.photos/800/400?random=7',
    date: '2024-03-09',
    views: 1234,
    tags: ['微服务', '架构设计', '技术分享']
  },
  {
    id: 8,
    title: '移动应用开发新趋势',
    description: '探讨Flutter、React Native等跨平台开发框架的最新进展和应用案例。',
    image: 'https://picsum.photos/800/400?random=8',
    date: '2024-03-08',
    views: 987,
    tags: ['移动开发', '跨平台', '技术趋势']
  },
  {
    id: 9,
    title: '数据安全与隐私保护研讨会',
    description: '探讨数据安全、隐私保护等热点话题，分享最佳实践和解决方案。',
    image: 'https://picsum.photos/800/400?random=9',
    date: '2024-03-07',
    views: 1567,
    tags: ['数据安全', '隐私保护', '技术研讨']
  },
  {
    id: 10,
    title: '2024年技术学习路线图',
    description: '为开发者提供全面的技术学习指南，包括前端、后端、移动端等多个方向的学习路径。',
    image: 'https://picsum.photos/800/400?random=10',
    date: '2024-03-06',
    views: 2345,
    tags: ['学习路线', '技术指南', '职业发展']
  }
])
</script>

<style scoped>
.news-page {
  padding: 20px;
  background-color: var(--bg-color);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  margin-bottom: 30px;
  font-size: 28px;
  color: var(--text-primary);
  text-align: center;
  font-weight: bold;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-card {
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.news-content {
  display: flex;
  gap: 24px;
  padding: 20px;
}

.news-image {
  width: 320px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f56c6c;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-title {
  margin: 0 0 16px;
  font-size: 22px;
  color: var(--text-primary);
  font-weight: bold;
  line-height: 1.4;
}

.news-desc {
  margin: 0 0 20px;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  font-size: 15px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-light);
  font-size: 14px;
}

.meta-left {
  display: flex;
  gap: 20px;
}

.news-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  margin-right: 4px;
  border-radius: 4px;
}
</style> 